<template>
  <div class="app-container">
    <el-button @click="logData">log data</el-button>
    <div ref="container" class="univer-container"></div>
  </div>
</template>

<script setup name="Role">
// import {
//   Univer,
//   UniverInstanceType,
//   Workbook,
//   LocaleType,
//   Tools,
//   SheetTypes,
//   // BooleanNumber,
// } from "@univerjs/core";
// import "@univerjs/design/lib/index.css";
// import "@univerjs/ui/lib/index.css";
// import "@univerjs/docs-ui/lib/index.css";

// import "@univerjs/sheets-ui/lib/index.css";
// import "@univerjs/sheets-formula/lib/index.css";
// import { defaultTheme } from "@univerjs/design";
// import { UniverDocsPlugin } from "@univerjs/docs";
// import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
// import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
// import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
// import { UniverSheetsPlugin } from "@univerjs/sheets";
// import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
// import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
// import { UniverUIPlugin } from "@univerjs/ui";
// // import { FUniver } from "@univerjs/core/facade";

// import DesignZhCN from "@univerjs/design/lib/locale/zh-CN.json";
// import UIZhCN from "@univerjs/ui/lib/locale/zh-CN.json";
// import DocsUIZhCN from "@univerjs/docs-ui/lib/locale/zh-CN.json";
// import SheetsZhCN from "@univerjs/sheets/lib/locale/zh-CN.json";
// import SheetsUIZhCN from "@univerjs/sheets-ui/lib/locale/zh-CN.json";
// import { onBeforeUnmount, onMounted, ref, toRaw, watch } from "vue";
// import { data } from "./data.ts";
// // import { univerData } from "./data.ts";

// const univerRef = ref(null);
// const workbook = ref(null);
// const container = ref(null);

// const bbb = ref("kkk");

// const logData = () => {};

// const initSheet = (data = {}) => {
//   const univer = new Univer({
//     theme: defaultTheme,
//     locale: LocaleType.ZH_CN,
//     locales: {
//       [LocaleType.ZH_CN]: Tools.deepMerge(
//         SheetsZhCN,
//         DocsUIZhCN,
//         SheetsUIZhCN,
//         UIZhCN,
//         DesignZhCN
//       ),
//     },
//   });
//   univerRef.value = univer;
//   univer.registerPlugin(UniverRenderEnginePlugin);
//   univer.registerPlugin(UniverFormulaEnginePlugin);
//   univer.registerPlugin(UniverUIPlugin, {
//     container: container.value,
//   });
//   univer.registerPlugin(UniverDocsPlugin, {
//     hasScroll: false,
//   });
//   univer.registerPlugin(UniverDocsUIPlugin);
//   univer.registerPlugin(UniverSheetsPlugin);
//   univer.registerPlugin(UniverSheetsUIPlugin);
//   univer.registerPlugin(UniverSheetsFormulaPlugin);

//   workbook.value = univer.createUnit(UniverInstanceType.UNIVER_SHEET, data);
//   const univerAPI = FUniver.newAPI(univer);
//   console.log(univerAPI, "univerAPI ");

//   console.log(univerRef.value, "univerRef");
//   console.log(univer, "univer");
//   console.log(workbook.value, "workbook");
// };
// onBeforeUnmount(() => {});
// onMounted(() => {
//   console.log(data, "aaa");
//   initSheet(data);
// });
</script>
<style lang="scss" scoped>
.app-container {
  height: 90vh;
  width: 100%;
  .univer-container {
    height: 100%;
    width: 100%;
  }
}
</style>
